<template>
    <div class="demo"> 
        <h3>姓名：{{name}}</h3>
        <h3>年龄：{{age}}</h3>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="showTel">查看电话</button>
        <hr/>
        <div>
            <h4>一辆{{car.brand}}车，价格<span style="color: red;">{{car.price}}</span></h4>
            <button @click="changePrice">修改车价格</button>
        </div>
        <hr/>
        <div>
            <h3>游戏列表：</h3>
            <ul>
                <li v-for="game in games" :key="game.id">{{game.name}} => {{game.id}}</li>
            </ul>
            <button @click="changeFirstNmae">修改第一个游戏名字</button>
        </div>
    </div>
    <hr/>
    <div class="demo2">
        <div>
            <h4>一辆{{car2.brand}}车，价格<span style="color: red;">{{car2.price}}</span></h4>
            <button @click="changePrice2">修改车价格</button>
            <button @click="changeCar2">修改车</button>
            <hr/>
            <h4>一辆{{car3.brand}}车，价格<span style="color: red;">{{car3.price}}</span>W</h4>
            <button @click="changeCar">修改车</button>
        </div>
    </div>
</template>
<!---
1.ref 与  reactive 区别
ref： 可以定义基本数据类型、对象类型的响应式数据
reactive： 只能定义对象类型的响应式数据

ref 创建对象类型的响应式数据时,其底层还是通过reactive实现的，获取数据时需要data.value
(即ref的value层就是reactive的返回值)
reactive 重新分配一个对象时会失去响应式(可以使用Object.assign去整体替换)


-->

<script lang="ts" setup>
    import { ref } from 'vue' //引入响应式拓展
    import { reactive } from 'vue' //引入创建对象类型的响应式数据
    //数据1
    let name = ref("张三"); //创建基本类型的响应式数据
    let age = ref(18);
    let tel = "12345678901";

    //数据2
    let  car = reactive({ brand: "奔驰", price: 100000}) //创建对象的响应式数据
    let games =reactive([
        { name: "英雄联盟", id: 'yxlm'},
        { name: "王者荣耀", id: 'wzry'},
        { name: "和平精英", id: 'hpjy'}
    ])

    //数据3
    let car2 = ref({ brand: "保时捷", price: 300000})
    
    //数据4
    let car3 = reactive({ brand: "玛莎拉蒂", price: 5000})
    
    //方法
    function showTel() {
        alert(tel)
    }
    function changeName() {
        name.value = "张四丰"
    }
    function changeAge() {
        age.value +=1
    }
    
    function changePrice(){
        car.price += 20000
    }
    
    function changeFirstNmae(){
        games[0].name = "原神"
        games[0].id = "ys"
    }
    
    function changePrice2(){
        car2.value.price += 50000
    }
    function changeCar2(){
        car2.value = { brand: "BYD", price: 3000}
    }
    
    function changeCar(){
        //car3 = { brand: "BYD", price: 3000} //无效
        //car3 = reactive({ brand: "BYD", price: 3000}) //无效
        Object.assign(car3, { brand: "BYD", price: 3000})
    
    }
     
</script>

<style>
    .demo {
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 10px;
        width: 400px;
        margin: 10px;
    }
    button  { 
        margin: 5px 5px;

    }
    .demo2 { 
        background-color: ddd;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 10px;
        width: 400px;
        margin: 10px;
    }  
</style>